<template>
  <view class="integralMall">
    <view class="gro">
      <swiper
        class="swiper"
        circular
        previous-margin="75px"
        next-margin="75px"
        @change="handleChange"
      >
        <swiper-item v-for="item in swiperList" :key="item.id" :item-id="item.id">
          <image :class="{ active: item.id === activeItemId }" :src="item.img" />
        </swiper-item>
      </swiper>
      <view class="content">
        <view class="con_a">
          <view class="ceg">
            <view class="ceg_a">邀请码</view>
            <view class="ceg_b">SIW1Tn</view>
          </view>
          <view class="copy">复制</view>
        </view>
      </view>
      <view class="bot">
        <view class="sub_a">保存图片</view>
        <view class="sub_b">复制链接</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';

  const swiperList = ref([
    { id: '1', img: '/src/static/images/b1e692b0cee5c5eb55620e3d6c0c2dae.jpg' },
    { id: '2', img: '/src/static/images/d2c56930baeb7e90956e1bc9aa9bb546.png' },
    { id: '3', img: '/src/static/images/7884667fb45fb7109141c04ca4fc1341.png' },
    { id: '4', img: '/src/static/images/03311cefcf68841398cc9af4bc656b3a.jpg' },
  ]);
  const activeItemId = ref('1');
  const handleChange = (value) => {
    const { detail } = value;
    activeItemId.value = detail.currentItemId; // 更新激活的图片id
  };
</script>
<style lang="scss" scoped>
  .integralMall {
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f8f8f8;
    padding-bottom: 60px;
    .gro {
      height: 369px;
      swiper {
        padding-top: 17px;
        height: 100%;
        swiper-item {
          height: 100%;
          text-align: center;
          overflow-y: auto !important;
          image {
            border-radius: 7px;
            margin: 20px 6% 0;
            width: 71%;
            height: 75%;
            animation: mymove 0.5s 1;
          }
          .active {
            width: 86%;
            margin: 0 3%;
            height: 90%;
            animation: rotation 0.5s 1;
          }
        }
      }
    }
    @keyframes mymove {
      0% {
        width: 86%;
        height: 90%;
        margin: 0 3%;
      }
      100% {
        width: 71%;
        height: 75%;
        margin: 20px 6% 0;
      }
    }
    @keyframes rotation {
      0% {
        width: 71%;
        height: 75%;
        margin: 20px 6% 0;
      }
      100% {
        width: 86%;
        height: 90%;
        margin: 0 3%;
      }
    }
    .content {
      padding: 0 4%;
      .con_a {
        padding: 0 15px;
        height: 77px;
        background: #fff;
        border-radius: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ceg {
          .ceg_a {
            font-size: 14px;
            color: #b2b2b2;
            margin-bottom: 6px;
          }
          .ceg_b {
            font-size: 17px;
            font-weight: 600;
            color: #323232;
          }
        }
        .copy {
          width: 67px;
          height: 30px;
          border: 1px solid #999;
          border-radius: 15px;
          text-align: center;
          line-height: 30px;
          font-size: 13px;
          color: #999;
        }
      }
    }
    .bot {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 49px;
      background: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .sub_a {
        width: 50%;
        text-align: center;
        height: 49px;
        line-height: 49px;
        font-size: 15px;
        color: #fff;
        background-color: #fe7c0e;
      }
      .sub_b {
        width: 50%;
        text-align: center;
        height: 49px;
        line-height: 49px;
        font-size: 15px;
        color: #fff;
        background-color: #0e20fe;
      }
    }
  }
</style>
